<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-1-13
  Time: 上午11:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>更新度假屋基地</title>
    <script>
        $(function () {

            $("#backList").click(function () {
                window.location.href = "/house/houseBase/list/1";
            });
            $("#firstImage").change(function () {
                $("#addImage").show();
                $("#delImage").show();
            });
            $("#addImage").click(function () {
                var content = '<input type="file"  name="images">';
                if ($(":file").length < 5) {
                    $(":file:last").after(content)
                }
            });
            $("#delImage").click(function () {
                if ($(":file").length > 1) {
                    $(":file:last").remove();
                } else {
                    $(":file:last").val("");
                }
            });

            $(".delImg").hide();
            var delImgs = $("[id^=delImg_]");
            for (var i = 0; i < delImgs.length; i++) {
                delImgs.eq(i).bind({
                    mouseenter: function (e) {
                        $(this).show();
                    },
                    mouseleave: function (e) {
                        $(this).hide();
                    }
                });
            }

            //houseBaseThemes 挨个循环
            var theme = $("#theme").val();
            var array = theme.split(',');
            var themes = $("[id^=houseBaseTheme]");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < themes.length; j++) {
                    if (themes.eq(j).val() == array[i]) {
                        themes.eq(j).attr("checked", "true");
                    }
                }
            }

        });

        function mouseover(id) {
            var index = id.substr(6);
            $("#delImg_" + index).show();
        }

        function mouseout(id) {
            var index = id.substr(6);
            $("#delImg_" + index).hide();
        }

        function delImg(imgGuid) {
            var guid = $("#guid").val();
            $.ajax({
                url: "/house/houseBase/delImg",
                type: "POST",
                dataType: "json",
                data: "imgGuid=" + imgGuid,
                success: function (data) {
                    location.reload();
                }
            })
        }
    </script>
</head>
<body>
<div>
    <form:form commandName="houseBaseDTO" action="/house/houseBase/update" enctype="multipart/form-data">
        <form:hidden path="guid" id="guid"/>
        <form:hidden path="id"/>
        <table class="table table-striped">
            <tbody>
            <tr>
                <td>产品类型</td>
                <td><form:radiobutton path="productType" value="HOUSEBASE"/>别墅
                    <form:radiobutton path="productType" value="APARTMENT"/>公寓
                    <form:errors path="productType" cssClass="t16"/>
                </td>
            </tr>
            <tr>
                <td>名字</td>
                <td><form:input path="title"/><form:errors path="title" cssClass="t16"/></td>
            </tr>
            <tr>
                <td>介绍</td>
                <td><form:textarea path="introduction" cssStyle="width: 460px; resize: none"/><form:errors path="introduction" cssClass="t16"/></td>
            </tr>
            <tr>
                <td>详情</td>
                <td><form:textarea path="information" cssStyle="width: 460px; resize: none"/><form:errors path="information" cssClass="t16"/></td>
            </tr>
            <tr>
                <td>价格</td>
                <td><form:input path="price"/><form:errors path="price" cssClass="t16"/></td>
            </tr>
            <tr>
                <td>区域</td>
                <td><form:select path="houseBaseArea" id="houseBaseArea">
                    <c:forEach items="${areas}" var="area">
                        <form:option value="${area.name}">${area.label}</form:option>
                    </c:forEach>
                </form:select></td>
            </tr>
            <tr>
                <td>是否精选</td>
                <td>
                    <form:radiobutton path="fineTheme" value="1"/>精选
                    <form:radiobutton path="fineTheme" value="0"/>非精选
                </td>
            </tr>
            <tr>
                <td>主题</td>
                <td id="houseBaseTheme">
                        <%--<form:hidden path="houseBaseTheme" id="theme"/>--%>
                    <input type="hidden" value="${houseBaseDTO.houseBaseTheme}" id="theme"/>
                        <%--<form:checkboxes path="houseBaseTheme" items="${labels}"></form:checkboxes>--%>
                    <c:forEach items="${themes}" var="theme">
                        <form:checkbox path="houseBaseTheme" value="${theme.name}"/>${theme.label}
                    </c:forEach>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <c:if test="${houseBaseDTO.imageGuids!=null}">
                        <c:forEach items="${houseBaseDTO.imageGuids}" var="images" varStatus="status">
                            <img src="/public/img/${images}/50/70" style="width:50px;height:70px"
                                 class="houseBaseImg" id="hbImg_${status.index}"
                                 onmouseover="mouseover('hbImg_${status.index}')"
                                 onmouseout="mouseout('hbImg_${status.index}')">
                            <img src="/public/img/x.png" style="margin-top: -35px;margin-left:-39px;opacity:0.8"
                                 class="delImg" onclick="delImg('${images}')" id="delImg_${status.index}">
                        </c:forEach>
                    </c:if>
                    <input type="file" id="firstImage" name="images"><form:errors path="images" cssClass="t16"/>
                    <a href="javascript:void(0)" id="addImage" style="display:none">添加</a>&nbsp;
                    <a href="javascript:void(0)" id="delImage" style="display:none">删除</a>
                </td>
            </tr>
            <tr>
                <td>操作</td>
                <td>
                    <input type="submit" class="btn btn-success" value="保存"/>
                    <input type="button" id="backList" class="btn btn-info" value="返回列表">
                </td>
            </tr>
            </tbody>
        </table>
    </form:form>
</div>
</body>
</html>